<template>
  <div class="container">
    <div v-for="(item, index) in list" :key="index" class="item" :style="{'background-color':item.color}">
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        title: '库房管理',
        color: '#F56C6C'
      }, {
        title: '设备管理',
        color: '#E6A23C'
      },
      {
        title: '环境监控',
        color: '#67C23A'
      },
      {
        title: '报警监控',
        color: '#409EFF'
      }, {
        title: '报警管理',
        color: '#87956F'
      }, {
        title: '盒管理',
        color: '#8358A9'
      }
      ],
      color: [
        '#D05D5D',
        '#E17A4D',
        '#ECC055']
    }
  }

}
</script>

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-flow: wrap;

}
.item {
    margin-top: 2vh;
    width: 18%;
    height: 120px;
    margin-right: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 18px;
}
</style>
